今天要來做第七張網美照，其實就是很簡單的調整位置，加上標題。關於怎麼調整位置好像不需要做到筆記，所以今天的筆記可能要來寫其他東西，就來整理一下margin和padding的一些功能吧!畢竟有時候我還是會把這兩個搞混...

筆記區

先來小小的廢話，margin和padding都有分上下左右四個邊。

一、外部是margin

margin是用來調整外部邊界的距離(跟外部元素的距離)，前面有提到邊界分上下左右四個邊，所以也可以各別調整其數值，如以下：
只給一個參數：margin: 統一外部邊界距離;
兩個參數：margin: 上下 左右;
三個參數：margin: 上 左右 下;
四個參數：margin: 上 右 下 左;
如果想單獨調整某一邊的外界距離，就可以用以下方式修改：

另外，填入的單位有一般長度單位和%(依照瀏覽本身長寬去做調整)，較為特別的是auto，auto是讓瀏覽器自己調整距離，最常看到的使用方式是在水平置中，如margin: auto;，就可以讓元素水平置中了。

二、內部是padding

其實padding跟margin類似，只是差別在padding是內部元素的邊界距離，如內文與外框間的距離，依樣也有分成上下左右來調整，如以下：
只給一個參數：padding: 統一外部邊界距離;
兩個參數：padding: 上下 左右;
三個參數：padding: 上 左右 下;
四個參數：padding: 上 右 下 左;
當然也可以單獨調整某一邊與內部元素的距離，可以用以下方式修改：

成果展示

參考資料

CSS padding 內距屬性與用法範例 - Wibibi
CSS Padding - W3Schools
CSS Margin - W3Schools
padding - CSS - MDN Web Docs
margin - CSS - MDN Web Docs